<template>
  <div class="tow-part">
    <div class="part1">
      <slot name="part1"></slot>
    </div>
    <div class="divider">
    </div>
    <div class="part2">
      <slot name="part2"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'two-part',
  emits: [],
  props: {},
  setup(props, { emit }) {

  },
});
</script>
<style scoped lang="scss">
.tow-part {
  box-sizing: border-box;
  font-size: .901387rem;
  display: flex;
  flex-direction: row;
  flex: 1;

  .part1 {
    flex: 1;
  }

  .part2 {
    flex: 1;
  }

  .divider {
    border: 1px solid #bfcce0;
    cursor: col-resize;
  }
}
</style>
